<%--
  Created by IntelliJ IDEA.
  User: Song
  Date: 15-12-21
  Time: 下午4:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>用户信息后台管理</title>
    <script src="/static/bootstrap/js/bootstrap-paginator.js"></script>
    <script>
        $(function () {

            $("td.FT").each(function () {
                var FT = $(this).text().toString();
                if (FT == "false") {
                    $(this).text("否");
                }
                if (FT == "true") {
                    $(this).text("是");
                }
            });


            var a = $("[id^=info]");
            for (var i = 0; i < a.length; i++) {
                var str = a.eq(i).html().substr(0, 5);
                $("#info_" + i).html(str + '...');
            }
            var b = $("[id^=intro]");
            for (var i = 0; i < b.length; i++) {
                var str = b.eq(i).html().substr(0, 5);
                $("#intro_" + i).html(str + ' ...');
            }

            $("#check").hover(function () {
                $(this).css({cursor: "url(),pointer"});
            });

            var totalPage = $("#totalPage").val();
            var currentPage = $("#currentPage").val();
            var options = {
                bootstrapMajorVersion: 3,
                currentPage: currentPage,
                totalPages: totalPage,
                size: "normal",
                alignment: "center",
                itemTexts: function (type, page, current) {
                    switch (type) {
                        case "first":
                            return "首页";
                        case "prev":
                            return "上一页";
                        case "next":
                            return "下一页";
                        case "last":
                            return "末页";
                        case "page":
                            return page;
                    }
                },
                onPageClicked: function (e, originalEvent, type, page) {
                    window.location.href = '/back/user_info/list/' + page;
                }
            }
            $("#pager").bootstrapPaginator(options);

        });
        function searchUserInfo() {
            var phoneNum = $("#phoneNum").val();
            var realName = $("#realName").val();
            $.ajax({
                url: '/back/user_info/search',
                type: 'post',
                dataType: 'json',
                data: {phoneNum: phoneNum, realName: realName},
                success: function (data) {
                    $("table tbody").html(data);
                }
            })
        }
        function changeUserStatus(phoneNum, activate, currentPage) {
            $.ajax({
                url: '/back/user_info/userStatus/' + currentPage,
                type: 'post',
                data: {phoneNum: phoneNum, activate: activate},
                success: function () {
                    location.reload();
                }
            })
        }
    </script>
</head>
<body>
<div>
    <input type="text" id="phoneNum" placeholder="电话号码"/>&nbsp; OR &nbsp;
    <input type="text" id="realName" placeholder="真实姓名"/>&nbsp;
    <button type="button" class="btn btn-warning" onclick="searchUserInfo()">搜索用户</button>
    <table class="table table-striped" style="height: 45px;">
        <thead>
        <tr>
            <th>用户名</th>
            <th>真实姓名</th>
            <th>性别</th>
            <th>IDCard</th>
            <th>电话号码</th>
            <th>E-mail</th>
            <th>用户状态</th>
            <th>操作</th>
        </tr>
        </thead>

        <tbody>
        <c:forEach items="${usersInfoDTOs}" var="userInfoDTO">
            <tr>
                <td><p name="username">${userInfoDTO.username}</p></td>
                <td><p name="realName">${userInfoDTO.realName}</p></td>
                <td><p name="gender">${userInfoDTO.gender}</p></td>
                <td><p name="IDCard">${userInfoDTO.IDCard}</p></td>
                <td><p name="phoneNum">${userInfoDTO.phoneNum}</p></td>
                <td><p name="email">${userInfoDTO.email}</p></td>
                <td><p name="isActivate">${userInfoDTO.activate}</p></td>
                <td>
                    <c:choose>
                        <c:when test="${userInfoDTO.activate=='true'}">
                            <a href="javascript:void(0)"
                               onclick="changeUserStatus('${userInfoDTO.phoneNum}', 'false', '${currentPage}')"
                               title="用户状态">关闭</a>&nbsp;
                        </c:when>
                        <c:otherwise>
                            <a href="javascript:void(0)"
                               onclick="changeUserStatus('${userInfoDTO.phoneNum}', 'true', '${currentPage}')"
                               title="用户状态">开启</a>&nbsp;
                        </c:otherwise>
                    </c:choose>
                    <a href="/back/user_info/myHouse/${userInfoDTO.username}" title="详细信息">详细信息</a>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>
<div>
    <input type="hidden" id="totalPage" value="${totalPage}">
    <input type="hidden" id="currentPage" value="${currentPage}">
    <ul id="pager"></ul>
</div>
</body>
</html>